<template>
	<div>
		<el-button v-show="category == 0" @click="onOpenClose(1)"
			>markdown文本框</el-button
		>
		<el-button v-show="category == 1" @click="onOpenClose(0)"
			>富文本框</el-button
		>
		<span
			style="
				color: #666666;
				font-size: 12px;
				border: 1px solid #dcdfe6;
				padding: 5px;
				margin-left: 10px;
			"
			v-show="category == 1"
		>
			友情提示: 快捷键 f10 -> 全屏编辑</span
		>
		<template v-if="category == 1">
			<mavon-editor
				v-model="content"
				style="margin-top: 5px"
			></mavon-editor>
		</template>
		<el-card style="height: 600px; margin-top: 5px" v-else>
			<quillEditor v-model="content" style="height: 600px"></quillEditor>
		</el-card>
		<el-button
			@click="onSave"
			type="primary"
			style="margin-top: 10px"
			v-permission="['AddLog']"
			>保存</el-button
		>
	</div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import { RequestLogAdd } from '@/api/LogApi.js'
import DataUtil from '@/utils/DataUtil.js'
// 组件样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
	components: { quillEditor }, // 注册组件
	data() {
		return {
			content: '',
			// 文本框类型: 0.富文本框; 1.markdown文本框
			category: 0
		}
	},

	methods: {
		// 切换文本框
		onOpenClose(category) {
			this.category = category
		},

		onSave() {
			const logtime = DataUtil.formatDate.format(
				new Date(),
				'yyyy-MM-dd hh:mm:ss'
			)
			const mid = this.$store.getters.user.m_id

			RequestLogAdd(this.content, logtime, mid, this.category).then(
				data => {
					if (data.resultCode === 1) {
						this.$message({
							type: 'success',
							message: '添加日志成功!'
						})
						this.$router.replace({ path: '/log/list' })
					}
				}
			)
		}
	}
}
</script>

<style></style>
